<template>
  <div class="container">
    <toolbar :title="$route.meta.title" :back="true"></toolbar>
    <div class="t-container _m-2" style="background:#FFF">
      <cube-form
        ref="form"
        :model="form"
        :schema="schema"
        :options="options"
        :immediate-validate="false"
        @validate="validateHandler"
        @submit="submitHandler"
      ></cube-form>

      <div class="btns">
        <button class="btn btn-primary" @click="submit">提交反馈</button>
      </div>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";

import {show} from 'utils/Base'

import {saveSuggestion} from 'api/SuggestionApi'

export default {
  name: "Suggestions",
  components: {
    Toolbar
  },
  data() {
    return {
      form: {
        sugType: '',
        sugContent: ''
      },
      schema: {
        groups: [
          {
            legend: '反馈类型',
            fields: [
               {
                type: 'radio-group',
                modelKey: 'sugType',
                props: {
                  options: [
                    {label: '功能问题', value: '5.20.1'},
                    {label: '充值问题', value: '5.20.2'},
                    {label: '其他问题', value: '5.20.3'},
                  ],
                  position: "right"
                },
                rules: {
                  required: true
                },
                messages: {
                  required: "请选择反馈类型"
                }
              }
            ]
          },
          {
            legend: '详细描述',
            fields: [
              {
                type: 'textarea',
                modelKey: 'sugContent',
                props: {
                  placeholder: "在这里详细描述",
                  maxlength: 400,
                  autofocus: true
                },
                rules: {
                  required: true
                },
                messages: {
                  required: "请输入描述"
                }
              }
            ]
          }
        ]
      },
      options: {
        scrollToInvalidField: true,
        layout: "fresh" // classic fresh
      }
    };
  },
  methods: {
    submitHandler(e) {
      saveSuggestion(this.form)
        .then(res => {
          if(res.meta.success) {
            show("反馈成功，我们会在第一时间进行回复");
            
          }
        });
    },
    validateHandler(result) {},
    submit () {
       this.$refs.form.submit();
    }
  }
};
</script>

<style lang="stylus" scoped>
/ >>> .cube-textarea-wrapper {
  height: 100px;

  &.cube-textarea_active::after {
    border: 1PX solid $colorPrimary;
  }
}

/ >>> .cube-form_fresh {
  .cube-form-item {
    padding 10px 15px
  }

  .cube-validator-msg {
    top -24px
  }
}

.btns {
  text-align center
  .btn {
    width 60vw
    margin 10vw auto
  }
}
</style>
